<template>

    <header-wrapper ></header-wrapper>
    <el-affix :offset="0">
      <!--  导航条start-->
      <el-menu
          ref="navigation"
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#00BF66"
          text-color="#fff"
          active-text-color="#ffd04b"
          @select="handleSelect"
      >
        <el-menu-item index="1" >首页</el-menu-item>
        <el-menu-item index="2">机票</el-menu-item>
        <el-menu-item index="3" >火车票</el-menu-item>
        <el-menu-item index="4">汽车票</el-menu-item>
      </el-menu><!--  导航条 end-->
    </el-affix>
    <router-view ></router-view>
  <Footer></Footer>
</template>

<script>
import HeaderWrapper from "./welcome-page-components/HeaderWrapper.vue";
import Footer from "./Footer.vue";
import {ref, onBeforeMount, watch} from "vue";
import router from "../router";
import {useStore} from 'vuex'

export default {
  name: "HomePage",
  components:{
    HeaderWrapper,
    Footer
  },
  setup(){
    const store = useStore()
    let navigation = ref(null)
    let activeIndex = ref('1')
    // 路由
    const handleSelect = (key) => {
      store.state.navigationIndex = key
      if (key === "1") router.push('/home/plane-info')
      else if (key === "2") router.push('/plane-ticket')
      else if (key === "3") router.push('/train-tickets')
      else if (key === "4") router.push('/bus-ticket')
      else console.log("router error")
    }
    onBeforeMount(() => {
      router.replace('/home')
    })
    watch(
      () => store.state.navigationIndex,
        () => watchCb(store.state.navigationIndex),
    {immediate:false}
    )
    async function watchCb(index) {
      if (index !== activeIndex.value) {
        activeIndex.value = index
      }
    }
    return{
      activeIndex,
      navigation,
      handleSelect,
    }
  }
}
</script>

<style scoped>
.el-menu-demo{
  /*margin-left: 100px;*/
  padding-left: 100px;
}
</style>